<template>
    <div class="captcha-container">
        <div class="verify">
            <el-input :suffix-icon="data.isError  ? WarningFilled : null" class="verify-input" type="text" :prefix-icon="Promotion" v-model="data.userInput" maxlength="6"
                placeholder="请输入验证码"></el-input>
            <div class="verify-code">
                <div class="captcha-display" @click="refreshCaptcha">
                    {{ data.captchaText }}
                </div>
                <button class="refresh-btn" @click="refreshCaptcha" title="刷新">
                    <svg viewBox="0 0 24 24" width="16" height="16">
                        <path
                            d="M17.65,6.35C16.2,4.9 14.21,4 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20C15.73,20 18.84,17.45 19.73,14H17.65C16.83,16.33 14.61,18 12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6C13.66,6 15.14,6.69 16.22,7.78L13,11H20V4L17.65,6.35Z" />
                    </svg>
                </button>
            </div>
        </div>
    </div>

    <!-- <el-button plain @click="open">Open a draggable Message Box</el-button> -->
    <div class="bounce" ref="bounce"></div>
</template>

<script setup>
import { getVerifyCode } from '@/api/login';
import { WarningFilled } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from 'element-plus';
import { ref, onMounted, reactive } from 'vue';

onMounted(() => {
    
})

const data = reactive({
    captchaText: '',        // 生成的验证码
    userInput: '',          // 用户输入的验证码
    isInvalid: true,
    isError : false
})

const bounce = ref(null)

const props = defineProps({
    username: String
})

// 验证码配置
const config = {
    length: 6,
    chars: '0123456789ABCDEFGHJKLMNPQRSTUVWXYZ',    // 排除容易混淆的字符
}

// 生成随机验证码 --- 获取后端随机生成 generateCaptcha()
const generateCaptcha = async () => {
    if (props.username === '' || props.username === null || props.username === undefined) {
        open()
        return
    }

    const res = await getVerifyCode(props.username)

    if (res.code === '500') {
        open()
    }
    return res.data
}

// 刷新验证码
const refreshCaptcha = async () => {
    data.captchaText = await generateCaptcha()
    data.userInput = ''
}

// 验证用户输入
const validateCaptcha = () => {
    if (data.userInput.toUpperCase() === data.captchaText && data.captchaText != null && data.captchaText != '') {
        return true
    } else {
        data.userInput = ''
        data.isError = true
        return false
    }
}

// 账号输入错误提示
const open = () => {
    const tip = () => {
        bounce.value.style.display = 'block'
        setTimeout(() => {
            bounce.value.style.display = 'none'
        },700)
    }

    ElMessageBox({
        message: '账号不能为空且必须正确，请输入有效的账号',
        type: 'warning',
        title: 'Warning',
        showCancelButton: false, // 关闭取消按钮
        draggable: true,
        confirmButtonText: '确定'
    }).then(() => {
        tip()
    }).catch(() => {
        tip()
    })
}



// 暴露方法给父组件
defineExpose({
    validate: validateCaptcha,
    refresh: refreshCaptcha,
    getCurrentCaptcha: () => data.captchaText
})

</script>

<style scoped>
.captcha-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.captcha-display {
    display: flex;
    justify-content: space-around;
    align-items: center;
    cursor: pointer;
    border-radius: 4px;
    width: 100px;
    height: 30px;
    background: linear-gradient(135deg, #e0f7fa 0%, #80deea 50%, #4dd0e1 100%);
    box-shadow: 0 2px 6px rgba(0, 150, 136, 0.3);
    font-size: 14px;
    font-weight: bold;
    color: #1A3E72;
}

.captcha-input {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    flex-grow: 1;
}

.refresh-btn {
    background: none;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.refresh-btn:hover {
    background-color: #f5f5f5;
}

.refresh-btn svg {
    fill: #666;
}

.verify {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.verify-input {
    width: 240px;
}

.verify-code {
    width: 150px;
    display: flex;
    justify-content: space-between;
}


/* 点击确认或者取消的特效 */
.bounce {
  width: 100px;
  height: 100px;
  display: none;
  border: 1px solid #55C5DF;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image: url('../../public/监控.png');
  background-size: 50%;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 50%;
  animation: bounceAnimation 0.7s ease-in-out infinite;
  opacity: 0.75;
  z-index: 9;
}

@keyframes bounceAnimation {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(30px);
  }
  100% {
    transform: translateY(-100px);
  }
}
</style>